<template>
  <view class="index-body">
        <view class="works-classification">
                <view class="overlay"  :style="{ 'transform': `translateX(${isSlideIndex * 100}%)` }">
                    <view class="triangle"></view>
                </view>
                <view class="classification"  :style="{ 'color': `${isSlideIndex === index ? 'white' : ''}` }" 
                @click="isSlideIndex = index" :key="item.text" v-for="(item,index) in classifications">
                <image
                v-if="isSlideIndex === index"
                    class="logo"
                    :src="item.icon"
                    mode="widthFix"
                    ></image>
                    {{item.text}}
                </view>
        </view>

        <view class="info">
            <!-- <view class="body-content" :class="itemDfIndex === 0 ? 'click-body':'def-body'">
                <view class="item" :class="itemDfIndex === index ? 'item-click' : ''" @click="itemUpdate(index)"
                 v-for="(item,index) in contents"><view>{{item.name}}</view> </view>
            </view> -->

            <view class="cards" >
                <!-- <Cards v-if="isSlideIndex === 0"  :dyPlaying="item" v-for="item in dataList" :key="item.id"/> -->
                <PopularCar v-if="isSlideIndex === 0" :showStatus="false" :item="item" :index="index" v-for="(item,index) in dataList" :key="item.id"></PopularCar>
                <fui-divider v-else text="没有更多了"></fui-divider>
            </view>
        </view>
        <fui-load-ani v-if="dividerStatus" type="5"></fui-load-ani>
    
  </view>
</template>

<script setup lang="ts">
// import Cards from "./Cards.vue";
import dyPlayingService from "@/api/dyPlayingService";
import type{ DyPlaying  } from "@/api/model/dyUserCodeModel";
import PopularCar from "@/components/PopularCar/PopularCar.vue";
const isSlideIndex = ref(0)
const itemDfIndex = ref(0)
const classifications = ref([
    {
        text:'抖音',
        icon:'/static/dy-logo.png',
    }
    ,
    {
        text:'快手',
        icon:'https://img2.baidu.com/it/u=4088284713,1109244362&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
    }
    ,
    {
        text:'微信',
        icon:'https://img0.baidu.com/it/u=741594562,162690746&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    }
    ,
    {
        text:'QQ',
        icon:'https://img2.baidu.com/it/u=3720783756,2755526038&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400',
    }
])

const contents = ref([
    {
        name:"全部类型",
    },
    {
        name:"图库素材",
    }, {
        name:"图文定制",
    }, {
        name:"工具玩法",
    },
])
const  pageNo = ref(1)
const  pageSize = ref(10)
const itemUpdate = (index:number)=>{
    itemDfIndex.value = index
}
const dataList = ref<Array<DyPlaying>>([])
const bottomStatus = ref(true)
const dividerStatus = ref(false)
const getList =async ()=>{
    if(bottomStatus.value){
        dividerStatus.value = true
        const {success,result} = await dyPlayingService.list({
        pageNo:pageNo.value,
        pageSize:pageSize.value
    })
    if(success){
        pageNo.value ++;
        dataList.value.length > 0 ? dataList.value = dataList.value.concat(result.records) : dataList.value = result.records 
        if(result.records.length < pageSize.value){
            bottomStatus.value = false
        }
        dividerStatus.value = false
    }
    }
}

onMounted(()=>{
    getList()
})

// 抛出方法

defineExpose({ getList })

</script>

<style lang="scss" scoped>
.index-body{
    margin: 20rpx;
    .info{
        display: flex;
        .click-body{
        background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 15%, rgb(248,247,252) 10%, rgb(248,247,252) 100%);
        }
        .def-body{
            background:rgb(248,247,252);
        }
        .body-content{
            margin-top: 20rpx;
            // background:rgb(248,247,252);
            width: 25%;
            text-align: center;
            font-size: 27rpx;
            padding:20rpx 0 ;
            .item{
                margin: 20rpx 0;
                padding: 20rpx 0;
                border-radius: 20rpx 0 0 20rpx;
                view{
                    text-align: center;
                    border-left: rgb(248,247,252) 5rpx solid;
                }
            }
            .item-click{
                background: white;
                view{
                    color: #6327d1 ;
                    border-left: #6327d1 5rpx solid;
                }
            }
        }
        .cards{
            width: 90%;
            margin: 20rpx 5%;
        }
    }
    .works-classification{
            display: flex;
            border-radius: 10rpx;
            background: rgb(248,247,252);
            padding:20rpx 0;
            color: rgb(0, 0, 0);
            position: relative; /* 添加相对定位 */
            font-weight: bolder;
            justify-content: space-between;
            align-items: center;
            .overlay{
                position: absolute; /* 绝对定位，覆盖在 works-classification 上方 */
                bottom: 0;
                left: 0;
                width: 177.6rpx;
                background: rgb(111,92,227);
                z-index: 10; 
                border-radius: 10rpx; 
                height: 100%;
                transition: transform .1s;
                .triangle{
                    width: 0;
                    height: 0;
                    border-left: 15rpx solid transparent; /* 左边透明 */
                    border-right: 15rpx solid transparent; /* 右边透明 */
                    border-top: 26rpx solid rgb(111,92,227); /* 顶部为实色 */
                    position: relative;
                    top: 70rpx;
                    z-index: 10;
                    left: 75rpx;
                }
            }
            .classification{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200rpx;
                z-index: 11; 
            }
            .slide-right {
                transform: translateX(0%); /* 将 overlay 向右移动100%宽度 */
            }
            .logo{
                width: 40rpx;
                height: 40rpx;
                border-radius: 10rpx;
                margin-right: 10rpx;
            }

        }
}

</style>
